<template>
    <div class="container">

<!--        <Row class="btn-action">-->
<!--            <Col span="24">-->
<!--                <Button type="primary" class="mp10" @click="chuanSongAction">档案转送</Button>-->
<!--                <Button type="primary" @click="importExcel">数据导入</Button>-->
<!--            </Col>-->
<!--        </Row>-->

        <div class="opt-area-02">
            <div class="right-con">
                <div class="input-frame">
                    <Input type="text" clearable placeholder="请输入公司名称" v-model="params.work_name" />
                </div>
                <div class="input-frame">
                    <Input type="text" clearable placeholder="请输入姓名" v-model="params.name" />
                </div>
                <div class="input-frame">
                    <Input type="text" clearable placeholder="请输入身份证号" v-model="params.card_no" />
                </div>
                <div class="input-frame">
                    <Input type="text" clearable placeholder="请输入手机号码" v-model="params.phone" />
                </div>
                <Button style="margin-right: 10px" type="primary" @click="selectlist(1)">查询</Button>
                <Button style="margin-right: 10px" type="primary" @click="addItem()">添加</Button>
                <Button type="primary" @click="importExcel">数据导入</Button>
            </div>
        </div>

        <Table :loading="countData.loading" border :columns="columns2" :data="fcDataList" size="small" @on-selection-change="selectList">
            <template slot-scope="{ row }" slot="health_type">
                <div v-if="row.health_type==='0'">健康</div>
                <div v-if="row.health_type==='1'" style="color: orangered">异常</div>
            </template>
            <template slot-scope="{ row }" slot="person_type">
                <div v-if="row.person_type==='0'">正常</div>
                <div v-if="row.person_type==='1'" style="color: orangered">离职</div>
                <div v-if="row.person_type==='2'" style="color: orangered">休假</div>
                <div v-if="row.person_type==='3'" style="color: orangered">病假</div>
            </template>
            <template slot="action" slot-scope="{ row }">
                <Button class="table-action-btn" type="primary" size="small"
                        @click="showdetail(row, 'edit')">编辑
                </Button>
                <!--                <Button class="table-action-btn" type="success" size="small"-->
                <!--                        @click="uploadImgAll(row, 'uploadImg')">批量上传-->
                <!--                </Button>-->
                <Button type="error" size="small" @click="deleteRow(row)">删除</Button>
            </template>
        </Table>
        <Row type="flex" justify="end" class="page_style">
            <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize"
                  show-total @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
        </Row>
<!--        <img-import-service ref="imgService" :options="row"></img-import-service>-->
<!--        <turn-people-model ref="turnPeopleModel" :options="selection" @clean="clean"></turn-people-model>-->
    </div>
</template>

<script>
import { getPeopleList, deletePeople } from '@/api/worker'

export default {
  name: 'houseList',
  data () {
    return {
      row: {},
      countData: { loading: true, gjnum: 0, tjnum: 0, zcnum: 0 },
      params: { name: '', pageNo: 1, pageSize: 10 },
      columns2: [
        {
          title: '比对信息',
          key: 'iscomparison',
          minWidth: 100,
          align: 'center',
          className: 'noticeConciseContent',
          render: (h, params) => {
            let texts = ''
            let title = ''
            let title_color = '#515a6e'
            if (params.row.iscomparison === '0') {
              texts = '未比对'
              title = '未比对'
            } else {
              if (params.row.result === '1') {
                texts = '信息无误'
                title = '信息无误'
              } else {
                title = '信息有误'
                title_color = '#ed4014'
                texts = '身份证不合法或者身份证与姓名不匹配'
              }
            }
            // texts = params.row.work_name
            return h('div', [
              h('Tooltip', {
                props: {
                  placement: 'top',
                  transfer: true
                },
                style: {
                  color: title_color
                }
              }, [title, h('span', {
                slot: 'content',
                style: {
                  whiteSpace: 'normal'
                }
              }, texts)
              ])
            ])
          }
        },
        { title: '公司名称', key: 'work_name', width: 150, align: 'center' },
        { title: '姓名', key: 'name', width: 170, align: 'center' },
        { title: '手机号码', key: 'phone', width: 160, align: 'center' },
        { title: '身份证号', key: 'card_no', width: 160, align: 'center' },
        { title: '健康状态', slot: 'health_type', width: 140, align: 'center' },
        { title: '人员状态', slot: 'person_type', width: 140, align: 'center' },
        { title: '经度', key: 'longitude', width: 160, align: 'center' },
        { title: '纬度', key: 'latitude', width: 160, align: 'center' },
        { title: '操作', align: 'center', minWidth: 250, slot: 'action', fixed: 'right' }
      ],
      fcDataList: [],
      selection: []
    }
  },
  methods: {
    addItem () {
      console.log('111')
      this.$router.push({ path: '/worker/add', query: { what: 'add' } })
    },
    clean () {
      this.selection = []
      this.getList()
    },
    selectList (selection) {
      this.selection = selection
    },
    pageAction (page) {
      this.params.pageNo = page
      this.getList()
    },
    selectlist () {
      this.params.pageNo = 1
      this.params.type = this.type
      this.getList()
    },
    getList () {
      getPeopleList(this.params).then(res => {
        let result = res.data.data
        if (res.data.errcode === 0 || res.data.errcode === 1001) {
          this.fcDataList = res.data.data.results
          this.params.pageNo = result.pageNo
          this.params.pageSize = result.pageSize
          this.params.totalPage = result.totalPage
          this.params.totalRecord = result.totalRecord
          this.countData.loading = false
        }
      })
    },
    deleteRow (row) {
      this.$Modal.confirm({
        title: '确认删除此条信息吗？',
        content: '删除后不可恢复，请确认后再操作！',
        onOk: () => {
          deletePeople({ id: row.id }).then(ret => {
            if (ret.data.errcode === 0) {
              this.$Message.info('删除成功')
              this.params.work_name = ''
              this.params.name = ''
              this.params.card_no = ''
              this.params.phone = ''
              this.selectlist()
            } else {
              this.$Message.error('获取信息失败，请检查网络！')
            }
          })
        }
      })
    },
    showdetail (row, what) {
      this.$router.push({ path: '/worker/add', query: { id: row.id, what: what } })
    },
    uploadImgAll (row, what) {
      this.row = row
      this.$refs.imgService.modelAction()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.selectlist(this.params.pageNo)
    },
    chuanSongAction () {
      if (this.selection.length === 0) {
        this.$Message.info('请选择档案！')
      } else {
        this.$refs.turnPeopleModel.modelAction()
      }
    },
    importExcel () {
      this.$router.push({
        name: 'workerExcel',
        query: { type: 'worker' }
      })
    }
  },
  mounted () {
    this.selectlist()
  }
}
</script>

<style scoped>
    .page_style {
        margin: 20px 5px;
    }

    .input-frame {
        width: 120px;
        margin-right: 10px;
    }

    .house-list > .group {
        background: white;
        padding: 10px;
        margin-top: 10px;
    }

    .house-list > .group > .item {
        border-bottom: 1px solid #f5f5f5;
        padding: 10px 0;
    }

    .house-list > .group > .item .top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
    }

    .house-list > .group > .item .title {
        font-size: 14px;
        color: #333333;
    }

    .house-list > .group > .item .address {
        font-size: 12px;
        color: gray;
        display: flex;
        align-items: center;
    }

    .house-list > .group > .item .detail {
        font-size: 12px;
        color: dodgerblue;
    }

    .opt-area-02 {
        display: flex;
        align-items: center;
        flex-direction: column;
        border: 1px solid #abdcff;
        background-color: #f0faff;
        padding: 8px 16px 8px 16px;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .opt-area-02 .right-con {
        width: 100%;
        margin-top: 5px;
        display: flex;
    }

    .opt-area-02 .left-con {
        font-size: 14px;
        width: 100%;
    }

    .opt-area-02 .left-con span {
        font-weight: bold;
    }

    .opt-area-02 .right-con input {
        width: 150px;
        margin-right: 10px;
    }

    .opt-area-02 .right-con .input-frame {
        width: 200px;
        margin-right: 10px;
    }

    .table-action-btn {
        margin-right: 3px;
    }

    .container >>> .ivu-btn-small {
        height: 24px;
        padding: 0 5px;
        font-size: 12px;
        border-radius: 3px;
    }

    .btn-action {
        margin-bottom: 10px;
    }

    .mp10 {
        margin-right: 10px;
    }
</style>
